<template>
  <div class="switch-repertory">
    <div
      class="switch-repertory-inner"
      v-for="(workSpace, index) in conf.workSpaces"
      :key="index"
      :style="getWrapStyle(index)"
      :class="{active: conf.currentWorkspace && workSpace.name === conf.currentWorkspace.name}"
    >
      <ul :style="getUlStyle(index, workSpace)">
        <li v-for="(space, index) in workSpace.dto.repertoryList" :key="index" :class="{active: !space.disabled}" >
          <div @click="space.disabled = !space.disabled">{{space.name}}</div>
        </li>
      </ul>
      <ul :style="getUlStyle(index, workSpace)">
        <li>
          <div>仓库名</div>
          <div class="change-branch">
            <span>当前分支</span>
            <span>
              源分支
              <b>
                <i @click="setAllOriBranches(`master`)">m</i>
                <i @click="setAllOriBranches(`gray`)">g</i>
                <i @click="setAllOriBranches(`uat`)">u</i>
                <i @click="setAllOriBranches(`test`)">t</i>
              </b>
            </span>
            <span>
              目标分支
              <b>
                <i @click="setAllTarBranches(`master`)">m</i>
                <i @click="setAllTarBranches(`gray`)">g</i>
                <i @click="setAllTarBranches(`uat`)">u</i>
                <i @click="setAllTarBranches(`test`)">t</i>
                <i @click="conf.showChooseBranch()">其他</i>
              </b>
            </span>
          </div>
          <div>操作</div>
        </li>
        <li v-for="(repertory, index) in workSpace.dto.repertoryList" :index="index" v-if="!repertory.disabled">
          <div :class="{isMain: conf.currentWorkspace.dto.mainRepertory === repertory.name}"><span>{{repertory.name}}</span></div>
          <div v-if="!repertory.branches">仓库丢失</div>
          <div v-if="repertory.branches" class="change-branch">
            <!--当前分支-->
            <span>{{repertory.branches.current}}</span>
            <!--源分支-->
            <span :class="{lock: repertory.branch.ori.isLocked}">
              {{repertory.branch.ori.branch}}
              <b>
                <i @click="lockOri(repertory)" :class="{active: repertory.branch.ori.isLocked}">锁</i>
                <i @click="setOriBranches(repertory, `master`)">m</i>
                <i @click="setOriBranches(repertory, `gray`)">g</i>
                <i @click="setOriBranches(repertory, `uat`)">u</i>
                <i @click="setOriBranches(repertory, `test`)">t</i>
              </b>
            </span>
            <!--目标分支-->
            <span :class="{lock: repertory.branch.tar.isLocked}">
              {{repertory.branch.tar.branch}}
              <b>
                <i @click="lockTar(repertory)" :class="{active: repertory.branch.tar.isLocked}">锁</i>
                <i @click="setTarBranches(repertory, `master`)">m</i>
                <i @click="setTarBranches(repertory, `gray`)">g</i>
                <i @click="setTarBranches(repertory, `uat`)">u</i>
                <i @click="setTarBranches(repertory, `test`)">t</i>
                <i @click="conf.showChooseBranch(repertory)">其他</i>
              </b>
            </span>
          </div>
          <div>
            <span v-if="conf.currentWorkspace.dto.group === `company`">
              合并请求
              <b>
                <i @mouseup="conf.openMergeRequestPage(repertory, `master`)">m</i>
                <i @mouseup="conf.openMergeRequestPage(repertory, `gray`)">g</i>
                <i @mouseup="conf.openMergeRequestPage(repertory, `uat`)">u</i>
                <i @mouseup="conf.openMergeRequestPage(repertory, `test`)">t</i>
              </b>
            </span>
            &nbsp;
            <span @click="conf.openUrl(repertory)">打开仓库</span>
            &nbsp;
            <span @click="conf.setMain(repertory)">设为主仓库</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'home',
    props: ["conf", 'styleConf'],
    data() {return {}},
    computed: {},
    mounted() {
      this.initConf();
    },
    methods: {
      initConf () {
        this.conf.setTarBranches = (repertory, branch) => this.setTarBranches(repertory, branch);
        this.conf.setAllTarBranches = branch => this.setAllTarBranches(branch);
      },
      lockOri(repertory){
        const ori = repertory.branch.ori;
        ori.isLocked = !ori.isLocked;
      },
      setOriBranches(repertory, branch){
          const ori = repertory.branch.ori;
          ori.isLocked || (ori.branch = branch);
      },
      setAllOriBranches(branch){
        this.conf.currentWorkspace.dto.repertoryList.forEach(repertory => {
          const ori = repertory.branch.ori;
          ori.isLocked || (ori.branch = branch);
        });
      },
      lockTar(repertory){
        const tar = repertory.branch.tar;
        tar.isLocked = !tar.isLocked;
      },
      setTarBranches(repertory, branch){
        const tar = repertory.branch.tar;
        tar.isLocked || (tar.branch = branch);
      },
      setAllTarBranches(branch){
        this.conf.currentWorkspace.dto.repertoryList.forEach(repertory => {
          const tar = repertory.branch.tar;
          tar.isLocked || (tar.branch = branch);
        });
      },
      getUlStyle(index, space){
        return {
          backgroundImage: `url(${space.dto.imgUrl})`,
        }
      },
      getWrapStyle(index){
        const cur = this.conf.workSpaces.indexOf(this.conf.currentWorkspace);
        const len = Math.floor(this.conf.workSpaces.length) ;
        const deg = -(180 / len) * (index - cur);
        const scale = .24 - deg / 1000;
        return this.styleConf.chose === '3d' ? {
          transform: `rotateX(${deg}deg) rotateZ(${deg}deg) translateZ(${400 - deg / 2}px) scale3d(${scale}, ${scale}, ${scale})`,
        } : {}
      },
    },
    watch: {
      conf(){
        this.initConf()
      },
    },
  }
</script>
<style scoped>
  .config-manager.style3d .switch-repertory{
    perspective: 500px;
  }
  .config-manager.style3d .switch-repertory-inner{
    perspective: 500px;
  }
  .config-manager.style3d .switch-repertory-inner.active{
    transform: rotateX(0deg) translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  .config-manager.style3d .switch-repertory-inner>ul:first-child{
    transform: rotateX(15deg) rotateY(0deg)  translateZ(100px);
  }
  .switch-repertory {
    flex: 1 1 0;
    position: relative;
  }
  .switch-repertory-inner{
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: all .3s;
    opacity: 0;
    z-index: 0;
  }
  .switch-repertory-inner.active{
    opacity: 1;
    z-index: 1;
  }
  .switch-repertory-inner>ul{
    display: flex;
    flex: 1 1 0;
    background-size: cover;
    background-color: rgba(0, 0, 0, 1);
    border-radius: 10px;
    backface-visibility: hidden;
    padding: 10px;
  }
  .switch-repertory-inner>ul:first-child{
    flex: 0 0 auto;
    padding: 5px 10px;
    background-position: center top;
    transform-origin: bottom;
  }
  .switch-repertory-inner>ul:first-child>li{
    padding: 10px;
    color: #fff;
  }
  .switch-repertory-inner>ul:first-child>li>div{
    line-height: 50px;
    padding: 0 10px;
    background-color: #fff;
    color: var(--cl-major);
    border-radius: 4px;
  }
  .switch-repertory-inner>ul:first-child>li.active>div{
    color: #fff;
    background-color: var(--cl-major);
  }
  .switch-repertory-inner>ul:last-child{
    flex-direction: column;
    flex: 1.5 1.5  0;
    background-position: center bottom;
    transform: rotateX(-8deg) translateZ(100px);
  }

  .switch-repertory-inner > ul:last-child > li {
    display: flex;
    padding: 4px 0;
    overflow: hidden;
    background-color: rgba(255,255,255,.4);
  }

  .switch-repertory-inner > ul:last-child > li > div {
    color: var(--cl-major);
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    flex: 1 1 0;
    padding: 4px 10px;
    border-left: 1px dashed rgba(0,0,0,.8);
    margin: 0 4px;
  }
  .switch-repertory-inner > ul:last-child > li > div.isMain:before{
    content: '主';
    padding-right: 10px;
  }
  .switch-repertory-inner > ul:last-child > li > div:nth-child(1) {
    flex: .4 .4 0;
  }

  .switch-repertory-inner > ul:last-child > li > div:nth-child(2) {
    flex: 1.5 1.5 0;
  }

  .switch-repertory-inner > ul:last-child > li > div:nth-child(3) {
    flex: .6 .6 0;
  }

  .switch-repertory-inner > ul:last-child > li > div > span {
    font-size: 18px;
    position: relative;
    background: rgba(255,255,255,1);
    color: var(--cl-major);
    padding: 0 6px;
    border-radius: 2px;
    transition: all .3s;
  }
  .switch-repertory-inner > ul:last-child > li > div > span.lock:before{
    content: "锁";
  }
  .switch-repertory-inner > ul:last-child > li > div > span:hover {
    color: var(--cl-major-hover);
  }

  .switch-repertory-inner > ul:last-child > li > div > span:active {
    color: var(--cl-major-active);
  }

  .switch-repertory-inner > ul:last-child > li > div > span > b {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
  }

  .switch-repertory-inner > ul:last-child > li > div > span:hover > b {
    background-color: #fff;
    opacity: 1;
  }

  .switch-repertory-inner > ul:last-child > li > div > span:hover > b > i {
    flex: 1 1 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    font-style: normal;
    color: #666;
    background-color: #fff;
    opacity: .8;
    transition: all .3s;
    border-radius: 2px;
  }

  .switch-repertory-inner > ul:last-child > li > div > span > b > i.active{
    background-color: var(--cl-major-active);
    color: #fff;
  }
  .switch-repertory-inner > ul:last-child > li > div > span:hover > b > i:hover {
    background-color: var(--cl-major);
    color: #fff;
  }
  .change-branch{
    display: flex;
  }
  .change-branch>*{
    flex: 1 1 0;
    margin: 0 10px;
    text-align: center;
  }
</style>
